<template>
  <div class="netBox wrap scrollBar">
    <div class="topCon">
      <div class="title">视联网配置</div>
      <div class="setForm">
        <el-form :model="baseFrom" ref="baseFrom" :rules="baseFromRules">
          <el-form-item
            label="视联网网卡："
            :label-width="formLabelWidth"
            prop="netCard"
          >
            <el-select v-model="baseFrom.netCard" placeholder="请选择网卡">
              <el-option label="eth1(4A:02:A1:76:9A:60)" value="1"></el-option>
              <el-option label="eth0(42:AE:49:05:94:B4)" value="2"></el-option>
              <el-option label="lo(00:00:00:00:00:00)" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="主消息号MAC："
            :label-width="formLabelWidth"
            prop="mainnum"
          >
            <el-input
              placeholder="请输入主消息号MAC"
              v-model="baseFrom.mainnum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="主消息号："
            :label-width="formLabelWidth"
            prop="videonum"
          >
            <el-input
              placeholder="请输入主消息号"
              v-model="baseFrom.videonum"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="协议类型："
            :label-width="formLabelWidth"
            prop="proType"
            :required="true"
          >
            <el-radio disabled v-model="baseFrom.proType" label="1"
              >64位</el-radio
            >
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-button
              type="primary"
              :disabled="isDisabled"
              @click="saveSetting('baseFrom')"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottomCon">
      <div class="title">IP配置</div>
      <div class="setForm">
        <el-form :model="ipForm" ref="ipForm" :rules="ipFormRules">
          <el-form-item
            label="IP网卡："
            :label-width="formLabelWidth"
            prop="ipCard"
          >
            <el-select v-model="ipForm.ipCard" placeholder="请选择网卡">
              <el-option label="eth1(4A:02:A1:76:9A:60)" value="1"></el-option>
              <el-option label="eth0(42:AE:49:05:94:B4)" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="静态IP地址："
            :label-width="formLabelWidth"
            prop="ipAddress"
          >
            <el-input
              placeholder="请输入静态IP地址"
              v-model="ipForm.ipAddress"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="子网掩码："
            :label-width="formLabelWidth"
            prop="netMask"
          >
            <el-input
              placeholder="请输入子网掩码"
              v-model="ipForm.netMask"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="默认网关："
            :label-width="formLabelWidth"
            prop="gateway"
          >
            <el-input
              placeholder="请输入网关号码"
              v-model="ipForm.gateway"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="DNS服务器1："
            :label-width="formLabelWidth"
            prop="dnsServer1"
          >
            <el-input
              placeholder="请输入DNS服务器号"
              v-model="ipForm.dnsServer1"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="DNS服务器2："
            :label-width="formLabelWidth"
            prop="dnsServer2"
          >
            <el-input
              placeholder="请输入DNS服务器号"
              v-model="ipForm.dnsServer2"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label=""
            :label-width="formLabelWidth"
            style="margin-top: 15px"
          >
            <el-button
              type="primary"
              :disabled="isDisabled"
              @click="subSetting('ipForm')"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 确认框 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="500px"
      center
      custom-class="confirmInfo"
      top="20vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <img src="../../assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div style="margin-bottom: 5px">配置修改成功.需重启系统后生效,</div>
      <div>是否立即重启!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="isShow = false">否</el-button>
        <el-button type="shi" @click="isShow = false">是</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/baseConfig.less";
export default {
  name: "networkconfig",
  data() {
    let regExpForIp =
      /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;
    return {
      title: "提示",
      isDisabled: false,
      baseFrom: {
        netCard: "", //网卡
        mainnum: "", //主消息号MAC
        videonum: "", //主消息号
        proType: "1", //协议类型
      },
      ipForm: {
        ipCard: "", //ip网卡
        ipAddress: "", //IP地址
        netMask: "", //子网掩码
        gateway: "", //默认网关
        dnsServer1: "", //服务器地址
        dnsServer2: "",
      },
      formLabelWidth: "190px",
      //shilian
      baseFromRules: {
        netCard: [{ required: true, message: "请选择网卡", trigger: "change" }],
        mainnum: [
          {
            required: true,
            message: "请输入MAC地址",
            trigger: "blur",
          },
          {
            pattern: /^([0-9A-Za-z]{2}[:]){5}([0-9A-Za-z]{2}){1}$/,
            message: "请输入正确MAC, 格式为XX:XX:XX:XX:XX:XX",
            trigger: "blur",
          },
        ],
        videonum: [
          {
            required: true,
            message: "请输入主消息号",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]{11}$/,
            message: "请输入正确的主消息号",
            trigger: "blur",
          },
        ],
      },
      //ip
      ipFormRules: {
        ipCard: [{ required: true, message: "请选择网卡", trigger: "change" }],
        ipAddress: [
          {
            required: true,
            message: "请输入静态IP地址",
            trigger: "blur",
          },
          {
            pattern: regExpForIp,
            message: "请输入正确的IP地址",
            trigger: "blur",
          },
        ],
        netMask: [
          {
            required: true,
            message: "请输入子网掩码",
            trigger: "blur",
          },
          {
            pattern: regExpForIp,
            message: "请输入正确的子网掩码",
            trigger: "blur",
          },
        ],
        gateway: [
          {
            required: true,
            message: "请输入网关号码",
            trigger: "blur",
          },
          {
            pattern: regExpForIp,
            message: "请输入正确的网关号码",
            trigger: "blur",
          },
        ],
        dnsServer1: [
          {
            message: "请输入DNS服务器1号码",
            trigger: "blur",
          },
          {
            pattern: regExpForIp,
            message: "请输入正确的DNS服务器1号码",
            trigger: "blur",
          },
        ],
        dnsServer2: [
          {
            message: "请输入DNS服务器2号码",
            trigger: "blur",
          },
          {
            pattern: regExpForIp,
            message: "请输入正确的DNS服务器2号码",
            trigger: "blur",
          },
        ],
      },
      isShow: false, //1
    };
  },
  methods: {
    saveSetting(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShow = true;
        } else {
          return false;
        }
      });
    },
    subSetting(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShow = true;
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less">
.netBox {
  .el-form-item__error {
    padding-top: 0;
    font-size: 8px;
  }
  .el-input__inner {
    width: 250px;
    font-size: 12px;
    vertical-align: middle;
  }
}
</style>
<style lang='less' scoped>
.netBox {
  .topCon {
    height: 340px;
  }
  .bottomCon {
    height: 450px;
    .setForm {
      height: 350px;
    }
  }
  // 表单
  .setForm {
    width: 600px;
    height: 240px;
    margin: 20px auto 0;
    .el-form-item {
      margin-bottom: 8px;
    }
  }
}
</style>
